import React, { Component } from "react";

class Comments extends Component {
  state = {
    author: "",
    content: "",
  };
  // 合并多个输入的问题
  handleChange = (e) => {
    console.log(e.target.dataset.name);
    let name = e.target.dataset.name; // author/content
    this.setState({
      // key:value
      //[key+1]:value
      // [name] => author/content
      [name]: e.target.value,
    });
  };

  render() {
    return (
      <div>
        <input
          data-name="author"
          className="comments-text"
          value={this.state.author}
          onChange={this.handleChange}
          type="text"
          placeholder="请输入评论人"
        />
        <textarea
          data-name="content"
          rows="10"
          value={this.state.content}
          onChange={this.handleChange}
          className="comments-textarea"
          type="textarea"
          placeholder="请输入评论内容"
        ></textarea>
        <button className="comments-btn" onClick={()=>{
            this.props.handleAdd(this.state.author,this.state.content);
        }}>
          发布评论
        </button>
      </div>
    );
  }
}

export default Comments;
